<template>
    <view class="container">
        <car-list ref="mycar" :carLists="carList" @allSelBtn="allSelBtn" @selShop="selShop" @selGoods="selGoods"
            @jsbtn="jsbtn" @delbtn="delbtn" @changeNum="changeNum" @gdel="gdel" @jsCars="jsCars" @detailed="detailed"
            v-if="carList.length > 0"></car-list>

        <view class="no-data" v-else>
            <image src="@/static/shoppingCart/shoppingCart.png" mode=""></image>
            <view>您的购物车还是空的</view>
            <view class="btn" @click="btn">去逛逛</view>
        </view>
    </view>
</template>

<script>
import {
    shoppingCart,
    shoppingCartModify,
    batchDelete
} from '@/common/api/shoppingCart';
import carList from '@/components/car-list/car-list.vue'
export default {
    components: {
        carList
    },
    data() {
        return {
            maskTitle: '',
            carList: []
        }
    },
    onLoad() {

    },
    onShow() {
        if (this.$store.state.user.userInfo.token) {
            this.shoppingCart()
        }
        if (this.$refs.mycar) this.$refs.mycar.allSel = false
    },
    methods: {
        // 购物车列表
        shoppingCart() {
            this.carList = []
            shoppingCart({}).then(res => {
                if (res.code === 200) {
                    this.carList = res.data.list
                    if (this.$refs.mycar) this.$refs.mycar.int()
                }
            })
        },

        confirm: function () {//确定按钮
            console.log('您点击了确定按钮');
        },
        cancel: function () {//取消按钮
            console.log('您点击了取消按钮');
        },
        selGoods: function (carList) {
            var that = this;
            that.carList = carList;
        },
        selShop: function (carList) {
            var that = this;
            that.carList = carList;
        },
        allSelBtn: function (carList) {
            var that = this;
            that.carList = carList;
        },
        jsbtn: function (ids) {//结算按钮
            var that = this;
            console.log(ids);
            var that = this;
            /* 
             跳转结算页面

            */
        },
        delbtn: function (ids, list) {//删除按钮
            var that = this;
            /* 
             请求接口数据
            */
            for (let i = 0; i < list.length; i++) {
                for (let k = 0; k < list[i].glist.length; k++) {
                    if (list[i].glist[k].selected == true) {
                        list[i].glist.splice(k, 1);
                        k--
                    }
                }
                if (list[i].glist.length == 0) {//若当前店铺商品删除完，删除当前店铺
                    list.splice(i, 1);
                    i--
                }
            }
            that.carList = list;
            that.$refs.mycar.getAllMount(list);//计算价格展示
        },

        changeNum: function (itm, number = null) {
            let quantity = JSON.parse(JSON.stringify(itm.quantity))
            if (number) quantity = Number(quantity) + number
            if (quantity <= 0) quantity = 1
            shoppingCartModify({
                itemId: itm.itemId,
                skuId: itm.skuId,
                quantity: quantity,
            }).then(res => {
                if (res.code === 200) {
                    var that = this;
                    itm.quantity = quantity
                    that.$refs.mycar.getAllMount(carList);//计算价格展示
                }
            })
        },

        // 删除商品
        gdel(item) {
            uni.showModal({
                title: '提示',
                content: '是否移除选中的商品',
				confirmColor:'#C11C2F',
                success: (res) => {
                    if (res.confirm) {
                        let list = []
                        item.map((item) => {
                            list.push(item.id)
                        })
                        batchDelete({
                            shoppingCartIds: list,
                        }).then(res => {
                            if (res.code === 200) {
                                this.shoppingCart()
                            }
                        })
                    }
                }
            });
        },

        // 详情
        detailed(item) {
            uni.navigateTo({
                url: `/subPackages/index/goodDetailed/index?id=${item.itemId}`
            })
        },

        jsCars() {
            let list = []
            this.carList.map((item) => {
                if (item.selected) list.push(item)
            })
            if (list.length == 0) return
            let that = this
            uni.showModal({
                title: '提示',
                content: '是否结算选中的商品?',
				confirmColor:'#C11C2F',
                success: function (res) {
                    if (res.confirm) {
                        that.settlement(list)
                    }
                }
            });
        },

        //结算	
        settlement(list) {
            this.$store.commit("shop/SET_GOOD", list)
            console.log('this.carList======>', list)
            uni.navigateTo({
                url: '/subPackages/cart/orderInfo/index'
            })
        },

        btn() {
            uni.switchTab({
                url: '/pages/index/index'
            })
        },
    },

    onReachBottom() {

    },
    onShareAppMessage() {

    },





}
</script>

<style lang="scss" scoped>
view,
textarea,
input,
text,
button {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 28rpx;
    font-family: "微软雅黑";
}

.uni-checkbox-input {
    border-radius: 50% !important;
}

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
}

.line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: box;
    display: -webkit-box;
    line-clamp: 1;
    box-orient: vertical;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    /* 英文换行问题 */
}

.line2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: box;
    display: -webkit-box;
    line-clamp: 2;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    /* 英文换行问题 */
}

.centerboth {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.clearfix:after {
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

.clearfix {
    zoom: 1;
}

image {
    padding: 0;
    margin: 0;
}

textarea {
    width: 300rpx;
    height: 75rpx;
    display: block;
    position: relative;
    font-size: 28rpx;
}

button::after {
    border: none;
}

input:-ms-input-placeholder {
    color: #808080;
}

car-list {
    width: 100%;
}

.btn {
    width: 240rpx;
    height: 80rpx;
    background: #C11C2F;
    border-radius: 12rpx !important;
    font-weight: 500;
    font-size: 30rpx;
    color: #fff !important;
    line-height: 80rpx;
    text-align: center;
    margin: 45rpx auto;
}
</style>